<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#e90101"/>
    <title>音乐鉴赏与分享平台</title>
    <meta name="author" content="Themezinho">
    <meta name="description" content="For all kind of video streaming website">
    <meta name="keywords"
          content="digiflex, video, movie, show, tv, watch, online, streaming, stream, ads, trailer, imdb, dram, action, hollywood, cinema, rate">

    <!-- SOCIAL MEDIA META -->
    <meta property="og:description" content="digiflex | Online Movie Streaming">
    <meta property="og:image" content="http://www.themezinho.net/digiflex/preview.png">
    <meta property="og:site_name" content="digiflex">
    <meta property="og:title" content="digiflex">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://www.themezinho.net/digiflex">

    <!-- TWITTER META -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@digiflex">
    <meta name="twitter:creator" content="@digiflex">
    <meta name="twitter:title" content="digiflex">
    <meta name="twitter:description" content="digiflex | Online Movie Streaming">
    <meta name="twitter:image" content="http://www.themezinho.net/digiflex/preview.png">

    <!-- FAVICON FILES -->

    <link rel="stylesheet" href="layui/css/layui.css">

    <link href="ico/apple-touch-icon-144-precomposed.png" rel="apple-touch-icon" sizes="144x144">
    <link href="ico/apple-touch-icon-114-precomposed.png" rel="apple-touch-icon" sizes="114x114">
    <link href="ico/apple-touch-icon-72-precomposed.png" rel="apple-touch-icon" sizes="72x72">
    <link href="ico/apple-touch-icon-57-precomposed.png" rel="apple-touch-icon">
    <link href="ico/favicon.png" rel="shortcut icon">

    <!-- CSS FILES -->
    <link rel="stylesheet" href="css/lineicons.css">
    <link rel="stylesheet" href="css/fancybox.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">


    <link rel="stylesheet" href="kindeditor/themes/default/default.css" />
    <link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" />
    <script charset="utf-8" src="kindeditor/plugins/code/prettify.js"></script>
    <script charset="utf-8" src="kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
    <script>
        KindEditor.ready(function(K) {
            window.editor = K.create('#editor_id');
        });
    </script>
    <script>
        KindEditor.ready(function(K) {
            K.create('textarea[name="note"]', {
                width:"100%",
                uploadJson : 'kindeditor/jsp/upload_json.jsp',
                fileManagerJson : 'kindeditor/jsp/file_manager_json.jsp',
                allowFileManager : true,
                allowImageUpload : true,
                autoHeightMode : true,
                afterCreate : function() {this.loadPlugin('autoheight');},
                afterBlur : function(){ this.sync(); }  //Kindeditor下获取文本框信息
            });
        });
    </script>

    <style>

        .submitbtn{
            height: 70px;
            display: inline-block;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            background: #e90101;
            border: none;
            padding: 0 50px;
            width: 100%;
            text-align: center;
            line-height: 70px;
        }
    </style>

</head>
<body>

<div id="iframetop">


</div>
<!-- end mobile-menu -->
<!-- end navbar -->

<header class="page-header">
    <div class="container">
    </div>
</header>



<!-- end slider -->
<main>

    <section class="content-section" data-background="images/section-pattern01.png">
        <div class="container" id="app">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <div >
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                            <legend>上传歌曲</legend>
                        </fieldset>
                        <form role="form" >


                            <div class="form-group">
                                <label for="filename" class="col-sm-3 control-label">歌曲图片</label>
                                <div class="col-sm-5">
                                    <div class="layui-upload">
                                        <div class="layui-upload-list">
                                            <input type="hidden" v-model="movie.filename" id="filename"/>
                                            <img class="layui-upload-img" id="imgname" style="width: 92px;">
                                            <p id="demoText"></p>
                                            <button type="button" class="layui-btn" id="test1" style="background: #2b303a">上传图片</button>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="form-group">
                                <label for="videoname" class="col-sm-3 control-label">歌曲资源</label>
                                <div class="col-sm-5">
                                    <div class="layui-upload">
                                        <div class="layui-upload-list">
                                            <input type="hidden" v-model="movie.videoname" id="videoname"/>

                                            <p id="demoText1"></p>
                                            <button type="button" class="layui-btn" id="test2"><i class="layui-icon"></i>歌曲资源</button>
                                        </div>
                                    </div>
                                </div>
                            </div>





                            <div class="form-group">
                                <label for="movie.name" class="col-sm-3 control-label">歌曲名</label>
                                <div class="col-sm-5">
                                    <input type="text" v-model="movie.name" id="movie.name" placeholder="歌曲名">
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-sm-3 control-label">类别</label>

                                <div class="col-sm-5">
                                    <select v-model="movie.categoryid">
                                        <option value=""> 请选择类别</option>
                                        <option v-for="category in categorylist" :value="category.id"> {{category.name}}</option>

                                    </select>
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-sm-3 control-label">地区</label>

                                <div class="col-sm-5">
                                    <select  v-model="movie.areaid">
                                        <option value=""> 请选择地区</option>
                                        <option v-for="area in arealist" :value="area.id"> {{area.name}}</option>
                                    </select>
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="movie.author" class="col-sm-3 control-label">歌手</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" v-model="movie.author" id="movie.author" placeholder="歌手">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">年代</label>

                                <div class="col-sm-5">
                                    <select  v-model="movie.yeartime">
                                        <option value="2022">2022</option>
                                        <option value="2021">2021</option>
                                        <option value="2020">2020</option>
                                        <option value="2019">2019</option>
                                        <option value="2018">2018</option>
                                        <option value="2017">2017</option>
                                        <option value="2016">2016</option>
                                        <option value="2015">2015</option>
                                        <option value="2014">2014</option>
                                        <option value="2013">2013</option>
                                        <option value="2012">2012</option>
                                        <option value="2011">2011</option>
                                        <option value="2010">2010</option>
                                    </select>
                                </div>
                            </div>



                            <div class="form-group">
                                <label for="playtime" class="col-sm-3 control-label">发布时间</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control" v-model="movie.playtime" id="playtime" placeholder="发布时间">
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="editor_id" class="col-sm-3 control-label">歌手详情</label>

                                <div class="col-sm-8">
                                    <textarea class="form-control" id="editor_id" v-model="content" placeholder="歌手详情" style="width: 100%;height: 300px;"></textarea>
                                </div>
                            </div>



                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-5">
                                    <button type="button" class="submitbtn" @click="add">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- end membership -->
                </div>
                <!-- end col-7 -->
                <!--<div class="col-lg-5">-->
                    <!--<figure class="side-image">-->
                        <!--<img src="images/side-image02.png" alt="Image">-->
                    <!--</figure>-->
                    <!--&lt;!&ndash; end side-image &ndash;&gt;-->
                <!--</div>-->
                <!-- end col-5 -->
            </div>
            <!-- end row -->
        </div>
        <!-- end container -->
    </section>



    <footer class="footer">
        <div class="bottom-bar" id="iframefoot">
        </div>
    </footer>
</main>

<!-- JS FILES -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/fancybox.min.js"></script>
<script src="js/scripts.js"></script>


<script type="text/javascript" src="axios/vue.js"></script>
<script type="text/javascript" src="axios/axios.min.js"></script>
<script type="text/javascript" src="axios/qs.js"></script>
<script type="text/javascript" src="axios/getUrlParams.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="laydate/laydate.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>

<script type="text/javascript">

    var qs = Qs
    var vmm =new Vue({
        el:'#app',
        data:{

            movie:{
                name:"",
                filename:"",
                videoname:"",
                categoryid:"",
                areaid:"",
                author:"",
                yeartime:"2022",
                playtime:"",
                isfree:"",
            },
            arealist:[],
            categorylist:[],

        },
        mounted(){
            this.getcategorylist()
            this.getarealist()
            this.$nextTick(function(){

                laydate.render({
                    elem: '#playtime'
                    ,done:function(data){
                        vmm.movie.playtime = data
                    }
                });


                var img = "";
                layui.use(['form', 'layer', 'upload'], function () {
                    $ = layui.jquery;
                    var form = layui.form
                        , layer = layui.layer
                        , upload = layui.upload;

                    //普通图片上传
                    layui.use('upload', function () {
                        var $ = layui.jquery
                            , upload = layui.upload;

                        //普通图片上传
                        var uploadInst = upload.render({
                            elem: '#test1'
                            , url: 'admin/uploadImg'
                            , accept: 'images'
                            ,theme:'#00365a'
                            , size: 50000
                            , before: function (obj) {

                                obj.preview(function (index, file, result) {
                                    $('#imgname').attr('src', result);
                                });
                            }
                            , done: function (res) {
                                //如果上传失败
                                if (res.code > 0) {
                                    return layer.msg('上传失败');
                                }
                                //上传成功
                                var demoText = $('#demoText');
                                demoText.html('<span style="color: #4cae4c;">上传成功</span>');
                                var fileupload = $(".image");
                                fileupload.attr("value", res.data.src);
                                // $("#filename").val(res.data.src)
                                vmm.movie.filename = res.data.src
                                img = res.data.src;
                            }
                            , error: function () {
                                //演示失败状态，并实现重传
                                var demoText = $('#demoText');
                                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                                demoText.find('.demo-reload').on('click', function () {
                                    uploadInst.upload();
                                });
                            }
                        });




                        //视频上传
                        var uploadInst1 = upload.render({
                            elem: '#test2'
                            , url: 'admin/uploadImg'
                            , accept: 'audio'
                            ,theme:'#00365a'
                            // , size: 50000
                            , before: function (obj) {
                                obj.preview(function (index, file, result) {
                                    // $('#imgname').attr('src', result);
                                });
                            }
                            , done: function (res) {
                                //如果上传失败
                                if (res.code > 0) {
                                    return layer.msg('上传失败');
                                }
                                //上传成功
                                var demoText1 = $('#demoText1');
                                demoText1.html('<span style="color: #4cae4c;">上传成功</span>');
                                var fileupload = $(".image");
                                fileupload.attr("value", res.data.src);
                                // $("#filename").val(res.data.src)
                                vmm.movie.videoname = res.data.src
                                // img = res.data.src;
                            }
                            , error: function () {
                                //演示失败状态，并实现重传
                                var demoText1 = $('#demoText1');
                                demoText1.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                                demoText1.find('.demo-reload').on('click', function () {
                                    uploadInst1.upload();
                                });
                            }
                        });
                    });
                });
            })
        },
        methods:{
            add(){
                this.movie.content = window.editor.html()
                if(this.movie.filename==""){
                    layer.msg("请上传歌曲图片",{icon:5})
                    return;
                }

                if(this.movie.videoname==""){
                    layer.msg("请上传歌曲资源",{icon:5})
                    return;
                }

                if(this.movie.name==""){
                    layer.msg("歌曲名不能为空",{icon:5})
                    return;
                }

                if(this.movie.categoryid==""){
                    layer.msg("请选择类别",{icon:5})
                    return;
                }

                if(this.movie.areaid==""){
                    layer.msg("请选择地区",{icon:5})
                    return;
                }

                if(this.movie.author==""){
                    layer.msg("歌手不能为空",{icon:5})
                    return;
                }

                if(this.movie.yeartime==""){
                    layer.msg("年代不能为空",{icon:5})
                    return;
                }


                if(this.movie.playtime==""){
                    layer.msg("发布时间不能为空",{icon:5})
                    return;
                }

                axios.post('admin/movieAddforMemebr',qs.stringify({
                    filename:this.movie.filename,
                    videoname:this.movie.videoname,
                    name:this.movie.name,
                    categoryid:this.movie.categoryid,
                    areaid:this.movie.areaid,
                    author:this.movie.author,
                    yeartime:this.movie.yeartime,
                    playtime:this.movie.playtime,
                    content:this.movie.content,
                    shstatus:'待审核',

                })).then(response =>{
                    location.replace("myuploadlist.html")
            }).catch(error =>{
                })
            },

            getcategorylist(){
                axios.post('admin/categoryList',qs.stringify({
                })).then(response =>{
                    this.categorylist = response.data.list
            }).catch(error =>{
                })
            },

            getarealist(){
                axios.post('admin/areaList',qs.stringify({
                })).then(response =>{
                    this.arealist = response.data.list
            }).catch(error =>{
                })
            },


        },
    })
    window.onload = function(){
        $("#iframetop").load("top.html")
        $("#iframefoot").load("foot.html")

    }
</script>
</body>
</html>